<script setup>
const props = defineProps({
  cardWidth: {
    type: Number,
    default: 280,
  },
  position: {
    type: Object,
    default: () => null,
  },
})

const { position } = toRefs(props)

const loadHeight = computed(() => {
  if (!position.value)
    return 0

  return position.value.height
})

const positionStyle = computed(() => {
  const top = position?.value?.top ?? 0
  const left = position?.value?.left ?? 0

  return {
    position: 'absolute',
    top: `${top}px`,
    left: `${left}px`,
  }
})
</script>

<template>
  <div :style="positionStyle" class="image-card-wrapper">
    <router-link :style="{ width: `${cardWidth}px`, height: `${loadHeight}px` }" class="image-card" to="">
      <slot />
    </router-link>
  </div>
</template>

<style lang="scss" scoped>
.image-card {
  @apply relative flex items-center justify-center bg-white dark:bg-#18181c c-black dark:c-white shadow hover:shadow-lg transition;
  border-radius: 12px;
}
</style>
